<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/notes.css" />
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/element.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="page_root zysx_page">
				<el-card class="box-card" shadow="never">
					<div class="notes_title">注 意 事 项<i></i></div>
					<div class="content">
						<ul @click="dialog1 = true">
							<li v-for="(v,i) in form.desc">{{v}}</li>
						</ul>

						<div class="msg" @click="dialog2Click">
							<div>
								<span class="label">检测机构地址:</span>
								<span>{{form.address}}</span>
							</div>
							<div>
								<span class="label">电话:</span>
								<span>{{form.tel}}</span>
							</div>
							<div>
								<span class="label">邮政编码:</span>
								<span>{{form.postcode}}</span>
							</div>
						</div>
					</div>
				</el-card>
			</div>
			<el-dialog :visible.sync="dialog1" @open="dialogOpen1">
				<el-form>
					<el-form-item>
						<el-input type="textarea" resize='none'
								  rows="7" v-model="descText" autocomplete="off" @input="dialog1Input"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialog1 = false">确 定</el-button>
				</div>
			</el-dialog>

			<el-dialog :visible.sync="dialog2">
				<el-form :model="form">
					<el-form-item label="检测机构地址" label-width="100px" >
						<el-input v-model="form.address" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="电话" label-width="100px" >
						<el-input v-model="form.tel" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="邮政编码" label-width="100px" >
						<el-input v-model="form.postcode" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialog2 = false">确 定</el-button>
				</div>
			</el-dialog>
		</div>

		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					// 样品集合
					ypItemActive: '1',
					ypList: [{
						title: '样品1',
						name: '1'
					}],
					dialog1:false,
					dialog2:false,
					form:{
						desc:[
								'1、 报告无“检验检测专用章”和检验单位公章无效。',
								'2、 复制报告未重新加盖“检验检测专用章”和检验单位公章无效。',
								'3、 报告无制表、审核、批准人签章无效。',
								'4、 报告涂改、骑缝章不完整无效。',
								'5、 送样检验仅对来样负责。',
								'6、 对报告有异议，应于收到报告十五日之内向检验单位提出，逾期不予受理。',
								'7、 未经本中心同意，该报告不得用于商业性宣传。'
						],
						address:'广州市南沙区东涌镇市南路663号',
						tel:'1587459632',
						postcode:'255465266'
					},

					descText:''
				},
				directives: {
					focus: {
						inserted: function (el) {
							el.querySelector('input').focus()
						}
					}
				},
				created() {
					window.cache = window.parent.cache;
					var href = location.href
					this.index = href.substring(href.lastIndexOf("=")+1) - 1
					this.getData(this.index)
				},
				methods: {
					dialog1Input(){
						var arr = this.descText.split('\n')
						this.form.desc = arr
					},
					dialogOpen1(){
						var arr = this.form.desc;
						this.descText = arr.join('\n');
					},
                    dialog2Click(){
					    if(this.index == 0){
					        this.dialog2 = true
						}
					},

					getData(){
						var obj = window.cache.getItemData(this.index,'notice')
						if(this.index != 0){
                            var first = window.cache.getItemData(0,'notice')
							obj.address = first.address
							obj.tel = first.tel
							obj.postcode = first.postcode
						}
						this.form = obj
					}
				}
			})
		</script>
	</body>
</html>
